<template>
  <view class="container">
    <view class="header"></view>
    <view class="content">
      <view class="flex" @click="$refs.area.open()">
        <view class="name">工作地点</view>
        <view class="flex1">
          <text>请选则</text>
          <uni-icons type="right" size="20"></uni-icons>
        </view>
      </view>
      <view class="flex" @click="$refs.originaze.open()">
        <view class="name">机构信息来源</view>
        <view class="flex1">
          <text>{{ city ? city : '请选择' }}</text>
          <uni-icons type="right" size="20"></uni-icons>
        </view>
      </view>

      <view class="flex" @click="$refs.require.open()">
        <view class="name">招募信息来源</view>
        <view class="flex1">
          <text>请选则</text>
          <uni-icons type="right" size="20"></uni-icons>
        </view>
      </view>
      <view class="flex" @click="$refs.age.open()">
        <view class="name">获得驾照年份</view>
        <view class="flex1">
          <text>请选则</text>
          <uni-icons type="right" size="20"></uni-icons>
        </view>
      </view>
      <view class="flex">
        <view class="name">紧急联系电话</view>
        <view class="flex1">
          <input type="number" placeholder="请输入手机号码" style="text-align: right" />
          <uni-icons type="right" size="20"></uni-icons>
        </view>
      </view>
      <!-- 上传图片 -->
      <view style="font-weight: bold; font-size: 28rpx; color: #222222; margin-top: 44rpx; margin-bottom: 14rpx">上传身份证</view>
      <view class="font-weight: 500; font-size: 26rpx; color: #222222;">拍摄证件时确保证件完全处于拍摄框内，边角完整，内容无 遮挡</view>
      <!-- 身份证图片 -->
      <view class="idcard">
        <!-- 正面 -->
        <view @click="uploadimg(1)">
          <image src="../../static/mine/idcardfront.png" style="width: 312rpx; height: 181rpx" mode="aspectFill"></image>
          <view style="text-align: center; font-weight: 500; font-size: 26rpx; color: #222222">人面像</view>
        </view>
        <!-- 反面 -->
        <view @click="uploadimg(2)">
          <image src="../../static/mine/idcardback.png" style="width: 312rpx; height: 181rpx" mode="aspectFill"></image>
          <view style="text-align: center; font-weight: 500; font-size: 26rpx; color: #222222">国徽面</view>
        </view>
      </view>
      <!-- 上传驾驶证 -->
      <view style="font-weight: bold; font-size: 28rpx; color: #222222; margin-bottom: 24rpx; margin-top: 46rpx">上传驾驶证</view>
      <view style="font-weight: 500; font-size: 26rpx; color: #222222; margin-bottom: 24rpx">拍摄证件时确保证件完全处于拍摄框内，边角完整，内容无 遮挡</view>
      <!-- 驾驶证正面 -->
      <view class="carcard" @click="uploadimg(3)">
        <view style="font-weight: 500; font-size: 26rpx; color: #222222">驾驶证正本照</view>
        <image src="../../static/mine/carcardfront.png" style="width: 228rpx; height: 136rpx" mode="aspectFill"></image>
      </view>
      <!-- 驾驶证反面 -->
      <view class="carcard" @click="uploadimg(4)">
        <view style="font-weight: 500; font-size: 26rpx; color: #222222">驾驶证副页照</view>
        <image src="../../static/mine/carcardback.png" style="width: 228rpx; height: 136rpx" mode="aspectFill"></image>
      </view>
      <!--提交按钮 -->
      <view class="subbtn">提交申请</view>
    </view>
    <!-- 弹框 -->
    <!-- 地区弹框 -->
    <uni-popup ref="area" type="bottom">
      <view class="area">
        <view class="head">
          <view style="font-weight: 550; font-size: 30rpx; color: #222222; margin-top: 30rpx" @click="$refs.area.close()">取消</view>
          <view style="font-weight: bold; font-size: 32rpx; color: #222222">请选择</view>
          <view style="font-weight: 500; font-size: 30rpx; color: #3483f6" @click="fnok">确定</view>
        </view>
        <picker-view style="height: 500rpx" indicator-style="height: 50px;" :value="place" @change="bindChange">
          <picker-view-column>
            <view style="line-height: 100rpx; text-align: center" v-for="(item, index) in provinceData" :key="index">{{ item.name }}</view>
          </picker-view-column>
          <picker-view-column>
            <view style="line-height: 100rpx; text-align: center" v-for="(item, index) in cityData[0].city" :key="index">{{ item.name }}</view>
          </picker-view-column>
        </picker-view>
      </view>
    </uni-popup>
    <!-- 机构信息来源 -->
    <uni-popup ref="originaze" type="bottom">
      <view class="area">
        <view class="head">
          <view style="font-weight: 550; font-size: 30rpx; color: #222222; margin-top: 30rpx" @click="$refs.originaze.close()">取消</view>
          <view style="font-weight: bold; font-size: 32rpx; color: #222222">请选择</view>
          <view style="font-weight: 500; font-size: 30rpx; color: #3483f6" @click="originazefn">确定</view>
        </view>
        <picker-view style="height: 500rpx" indicator-style="height: 50px;" :value="organization" @change="organizationChange">
          <picker-view-column>
            <view style="line-height: 100rpx; text-align: center" v-for="(item, index) in organizationlist" :key="index">{{ item }}</view>
          </picker-view-column>
        </picker-view>
      </view>
    </uni-popup>
    <!-- 招募信息来源 -->
    <uni-popup ref="require" type="bottom">
      <view class="area">
        <view class="head">
          <view style="font-weight: 550; font-size: 30rpx; color: #222222; margin-top: 30rpx" @click="$refs.require.close()">取消</view>
          <view style="font-weight: bold; font-size: 32rpx; color: #222222">请选择</view>
          <view style="font-weight: 500; font-size: 30rpx; color: #3483f6" @click="requirefn">确定</view>
        </view>
        <picker-view style="height: 500rpx" indicator-style="height: 50px;" :value="organization" @change="requirechange">
          <picker-view-column>
            <view style="line-height: 100rpx; text-align: center" v-for="(item, index) in requirelist" :key="index">{{ item }}</view>
          </picker-view-column>
        </picker-view>
      </view>
    </uni-popup>
    <!-- 驾照年份 -->
    <!-- 招募信息来源 -->
    <uni-popup ref="age" type="bottom">
      <view class="area">
        <view class="head">
          <view style="font-weight: 550; font-size: 30rpx; color: #222222; margin-top: 30rpx" @click="$refs.age.close()">取消</view>
          <view style="font-weight: bold; font-size: 32rpx; color: #222222">请选择</view>
          <view style="font-weight: 500; font-size: 30rpx; color: #3483f6" @click="agefn">确定</view>
        </view>
        <picker-view style="height: 500rpx" indicator-style="height: 50px;" :value="age" @change="agechange">
          <picker-view-column>
            <view style="line-height: 100rpx; text-align: center" v-for="(item, index) in agelist" :key="index">{{ item }}</view>
          </picker-view-column>
        </picker-view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import provinceData from '@/utils/data.js';
export default {
  data() {
    return {
      age: [0], //驾照年份
      agelist: ['2000', '1998', '1999', '1974'], //年份列表
      require: [0], //招募
      requirelist: ['钻石', '慕斯', '老牛'], // 招募列表
      organization: [0], //机构
      organizationlist: ['张三', '里斯', '研究所'], // 机构列表
      place: [0, 0], // 选择市区
      provinceData: [],
      provinceidnex: 0, // 省份的索引
      provincename: '', // 省份
      cityname: '', //城市的名字
      cityindex: 0, // 城市的索引
      city: '',
      pid: 0
    };
  },
  computed: {
    cityData() {
      return this.provinceData.filter((item) => {
        return item.name == this.provinceData[this.provinceidnex].name;
      });
    }
  },
  onLoad() {
    this.provinceData = provinceData;
    console.log(this.provinceData);
    this.getcitys();
  },
  methods: {
    // 获取省市
    getcitys() {
      this.http('/index/citys', {
        pid: this.pid
      }).then((res) => {
        console.log(res);
      });
    },
    // 地址切换
    bindChange(e) {
      console.log(e.detail.value);
      this.provinceidnex = e.detail.value[0];
      this.cityindex = e.detail.value[1];
      this.provincename = this.provinceData[this.provinceidnex].name;
      this.cityname = this.provinceData[this.provinceidnex].city[this.cityindex].name;
      console.log(this.provincename, this.cityname);
    },
    // 确定地址
    fnok() {
      this.city = this.provinceData[this.provinceidnex].name + this.provinceData[this.provinceidnex].city[this.cityindex].name;
      this.$refs.area.close();
    },
    // 机构切换
    organizationChange(e) {
      console.log('机构的切换', e.detail.value);
    },
    // 机构确认
    originazefn() {},
    // 招募切换
    requirechange(e) {
      console.log('招募切换', e.detail.value);
    },
    // 招募确定
    requirefn() {},
    // 年份切换
    agechange(e) {
      console.log('年份切换', e.detail.value);
    },
    // 年份确认
    agefn() {},
    // 上传图片
    uploadimg(index) {
      uni.chooseMedia({
        count: 1,
        mediaType: ['image'],
        sourceType: ['album', 'camera'],
        sizeType: ['original', 'compressed'],
        success: (e) => {
          console.log('上传的那个图片', index);
          console.log('选择的图片', e.tempFiles[0].tempFilePath);
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 44rpx;
}
.flex1 {
  display: flex;
  align-items: center;
  font-weight: 500;
  font-size: 28rpx;
  color: #666666;
}
.container {
  box-sizing: border-box;
  .header {
    box-sizing: border-box;
    width: 750rpx;
    height: 20rpx;
    background: #f8f8f8;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
  }
  .content {
    box-sizing: border-box;
    padding: 0rpx 24rpx;
    .name {
      font-weight: 500;
      font-size: 28rpx;
      color: #222222;
    }
    .idcard {
      display: flex;
      align-items: center;
      justify-content: space-evenly;
      margin-top: 46rpx;
    }
    .carcard {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 30rpx;
    }
    .subbtn {
      box-sizing: border-box;
      width: 654rpx;
      height: 92rpx;
      text-align: center;
      line-height: 92rpx;
      background: #3483f6;
      font-weight: 500;
      font-size: 30rpx;
      color: #ffffff;
      border-radius: 20rpx 20rpx 20rpx 20rpx;
      margin-top: 42rpx;
      margin-left: 24rpx;
    }
  }
  .area {
    box-sizing: border-box;
    width: 750rpx;
    height: 776rpx;
    background: #ffffff;
    border-radius: 40rpx 40rpx 0rpx 0rpx;
    padding: 48rpx;
    .head {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background-color: #fff;
    }
  }
}
</style>
